<script setup lang="ts">
import { ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core'

const RefImg = ref<HTMLImageElement | null>(null)

/**
 * useIntersectionObserver
 * 两个参数
 * 第一个是目标元素，需要ref与模版绑定，且要配置类型 docuent.querySelector
 * 第二个是一个回调函数，回调函数中也有两个参数
 *                   第一个参数是一个数组，可以监听多个元素，一般只监听一个，
 *                                数组中里面是一个对象，从对象中取出 isIntersecting，通过判断它为true / false,来判断元素是否在可
 *                                视区域来进行动态的设置src
 *                   第二个参数是监视的元素，一般用不到
 * 
 * useIntersectionObserver 它前面还可以结构出一个方法，stop，在我们动态加载好了src之后再调用此方法就回停止监听元素，性能优化
 */

const { stop } = useIntersectionObserver(RefImg, ([{ isIntersecting }], observerElement) => {
  if (isIntersecting) {
    // console.log('加载了')
    RefImg.value!.src = 'https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg'
    stop()
  }

})
</script>

<template>
  <div style="height: 3000px;">演练场</div>
  <!-- <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt=""> -->
  <img ref="RefImg" alt="">
</template>

<style scoped>

</style> 